<template>
    <div class="relation_container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>产品</el-breadcrumb-item>
            <el-breadcrumb-item>期数管理</el-breadcrumb-item>
            <el-breadcrumb-item>当前期数下的产品</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 审核是否通过 -->
        <div class="Auditing">
            <div class="left">
                <span class="my_icon">!</span>
                <span class="text">提交前请仔细检查各项信息！</span>
            </div>

            <div class="right">
                <el-button @click="back()">返回</el-button>
                <el-button type="primary" @click="bindStage">确定移除</el-button>
            </div>
        </div>

        <el-card class="relation_card">

            <!-- title -->
            <el-row class="title">
                <el-col :span="4">
                    <span class="text">供应商:</span>
                    <el-select style="width: 70%;" clearable size="medium" v-model="operator_id" placeholder="请选择供应商">
                        <el-option v-for="item in operatorList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>

                <el-col :span="4">
                    <span class="text">产品名称:</span>
                    <el-input size='medium' style="width: 70%;" v-model="name" placeholder="请输入标题或编号"></el-input>
                </el-col>

                <el-col :span="13">
                    <el-button type="primary" style="padding: 9px 25px;" size="medium" plain @click="search()">筛选</el-button>
                </el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="content">

                <!-- 表格 -->
                <el-table class="relation_table" :data="tableData.slice((page-1)*limit,page*limit)" style="width: 100%" border  ref="multipleTable" tooltip-effect="dark"  @selection-change="handleSelectionChange">
                    <el-table-column width="76" type="selection">
                    </el-table-column>

                    <el-table-column prop="status" label="名称">
                        <div class="detail_box" slot-scope="scope">
                            <div class="detail">
                                <div class="img_box">
                                    <img :src="scope.row.picture" alt="">
                                </div>

                                <!-- 详情 -->
                                <div class="detail_right">
                                    <div class="item color1">{{ scope.row.title }}</div>
                                    <div class="item color2">起步价：¥ {{ scope.row.cost_price }}</div>
                                    <div class="item sb_jc color3">
                                        <!--<span>库存：3</span>-->
                                        <span>编号：{{ scope.row.sn }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-table-column>

                    <el-table-column prop="seller_name" label="供应商" width="350"></el-table-column>

                    <el-table-column prop="submit_time" label="上传时间" width="350"></el-table-column>
                </el-table>
            </div>

            <!-- 分页器 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total, prev, pager, next" :total="count">
            </el-pagination>

        </el-card>
    </div>
</template>

<script src='../../../static/js/relation/show_relation.js'></script>


<style scoped>
    @import "../../../static/css/relation/show_relation.css";
</style>

